<template>
	<div class="apply_safe_body">
		<el-form size="mini" :inline="true">
			<el-form-item v-hasPermi="'797bfaff047f4cf5a8d9334c09d5ea49'">
				<el-input placeholder="请输入名称" v-model="queryData.name" clearable style="width: 150px"></el-input>
			</el-form-item>
			<el-form-item v-hasPermi="'797bfaff047f4cf5a8d9334c09d5ea49'">
				<sw-ip-input placeholder="请输入IP地址" v-model="queryData.ipAddr" clearable style="width: 150px"></sw-ip-input>
			</el-form-item>
			<el-form-item v-hasPermi="'797bfaff047f4cf5a8d9334c09d5ea49'">
				<el-button type="primary" icon="el-icon-search" @click="queryBlackWhiteList">搜索</el-button>
			</el-form-item>
			<el-form-item v-hasPermi="'02dd859a433647b8bee94488efc2c707'">
				<el-button type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增名单</el-button>
			</el-form-item>
		</el-form>
		<el-tabs v-model="listType">
			<el-tab-pane label="黑名单" name="1"></el-tab-pane>
			<el-tab-pane label="白名单" name="2"></el-tab-pane>
		</el-tabs>
		<div class="sw_table_container">
			<el-table size="medium" height="100%" :data="blackWhiteList" stripe v-loading="loading">
				<el-table-column prop="name" label="名称" min-width="180"></el-table-column>
				<el-table-column prop="ipAddr" label="IP地址" min-width="180"></el-table-column>
				<el-table-column prop="createName" label="创建人" min-width="136"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
				<el-table-column label="操作" width="100" v-if="$isHasAuth(tableButton)">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" v-hasPermi="'eaaf5a08caa04031be7af509c0e23526'" @click="handleOpenDialog(row)">编辑</el-button>
						<el-button size="medium" type="text" v-hasPermi="'7d956a56648f4e92b96b97f0f3363df1'" @click="handleDeleteBlackWhite(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<template v-if="dataCount > 0">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryBlackWhiteList"></sw-pagination>
		</template>
		<black-white-form v-model="formDialog" :list-type="listType" :data="blackWhiteData" @refresh="queryBlackWhiteList"></black-white-form>
	</div>
</template>

<script>
import blackWhiteForm from './form';
import { getBlackPageList, deleteBlack } from '@/api/system/tbSysBlack';
export default {
	components: { blackWhiteForm },
	data() {
		return {
			loading: false,
			listType: '1',
			queryData: { page: 1, limit: 15 },
			dataCount: 0,
			blackWhiteList: [],
			blackWhiteData: {},
			formDialog: false
		};
	},
	computed: {
		tableButton() {
			return ['eaaf5a08caa04031be7af509c0e23526', '7d956a56648f4e92b96b97f0f3363df1']
		}
	},
	watch: {
		listType: {
			handler() {
				this.queryBlackWhiteList();
			},
			immediate: true
		}
	},
	methods: {
		//获取黑白名单
		async getBlackWhiteList() {
			let params = { ...this.queryData, type: this.listType };
			let result = await getBlackPageList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.blackWhiteList = !result.data ? [] : result.data;
			}
		},

		//查询黑白名单
		queryBlackWhiteList() {
			this.loading = true;
			this.getBlackWhiteList();
		},

		//打开表单弹出框
		handleOpenDialog(data) {
			this.blackWhiteData = !data ? {} : { ...data };
			this.formDialog = true;
		},

		//删除黑白名单
		handleDeleteBlackWhite(data) {
			let that = this;
			that.$confirm('此操作将永久删除该数据, 是否继续?', '删除提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					instance.confirmButtonLoading = true;
					if (action === 'confirm') {
						await deleteBlack(data.id).then((res) => {
							if (res.data.code === '0') {
								that.queryBlackWhiteList();
							}
						});
					}
					done();
					instance.confirmButtonLoading = false;
				}
			}).catch(() => {});
		}
	}
};
</script>

<style lang="scss" scoped>
.apply_safe_body::v-deep {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 16px;
	flex: 1;
	overflow: hidden;
	.el-form {
		position: absolute;
		top: 16px;
		right: 16px;
		z-index: 1;
	}
	.el-form-item {
		margin-bottom: 0;
		&:last-child {
			margin-right: 0;
		}
	}
}
</style>
